<?php
require_once 'code/Topic.php';
function getTreeHtml(Topic $topic=null) {
	$html = '';
	if ($topic) {
		$html .= '<li id="topic-'.$topic->getId().'" class="item">';
		$html .= '<span title="'.$topic->getName().'">'.$topic->getName().'</span>';
		$childs = $topic->getChilds();
		if (count($childs)) {
			$html .= '<ul>';
			foreach($childs as $child)
				$html .= getTreeHtml($child);
			$html .= '</ul>';
		}
		$html .= '</li>';
	} else {
		$topic = new Topic();
		$childs = $topic->getChilds();
		foreach($childs as $child) 
			$html .= getTreeHtml($child);
	}
	return $html;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="vi" xml:lang="vi" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" href="lib/treeview/treeview.css" />
	<link rel="stylesheet" href="lib/cleditor/cleditor.css" />
	<link rel="stylesheet" href="css/style.css" rel="stylesheet" />
	
	<script type="text/javascript" src="lib/jquery.js"></script>
	<script type="text/javascript" src="lib/jquery.cookie.js"></script>
	<script type="text/javascript" src="lib/treeview/treeview.js"></script>
	<script type="text/javascript" src="lib/splitter.js"></script>
	<script type="text/javascript" src="lib/cleditor/cleditor.js"></script>
	<script type="text/javascript" src="js/note.js"></script>
	<script type="text/javascript">
	</script>
	<title>Note</title>
</head>
<body>
	<div class="page">
		<div class="main">
			<div class="col-left">
				<ul id="topic-tree"><?php echo getTreeHtml() ?></ul>
			</div>
			<div class="col-main">
				<div id="viewport"></div>
			</div>
		</div>
	</div>
	<!-- loading icon -->
	<div class="loading" style="display: none">&nbsp;</div>
	
	<!-- context menu -->
	<ul id="cmenu" style="display:none">
		<li class="item" id="cmdEdit">Edit</li>
		<li class="item" id="cmdDel">Delete</li>
		<li class="item" id="cmdAddChild">Add child</li>
		<li class="item" id="cmdAddRoot">Add root</li>
	</ul>
	
	<div class="editor" style="display: none">
		<label for="t-name">Name</label>
		<input type="text" name="t-name" id="t-name" value=""/>
		<label for="t-tcontent">Name</label>
		<textarea name="t-content" id="t-content"></textarea>
	</div>
	
</body>
</html>